<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title></title>
        <script src="js/vue.global.js"></script>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        ul{
            display: flex;
            justify-content: center;
        }
        li{
            width: 70px;
            height: 70px;
            border: 1px solid #a93593;
            background: #000;
            color: #a0913d;
            border-radius: 7px;
            text-align: center;
            line-height: 70px;
            box-shadow: 5px 5px 5px #a0913d;
            margin: 10px 5px;
            transition: .3s;
        }
        .act{
            background-color: yellow;
            border-color: yellow;
            color: #333;
        }
        .act1{
            background-color: greenyellow;
            border-color: greenyellow;
            color: #333;
        }
    </style>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item, index) in ques" :class="index<count ? 'act1' : ''">
                    {{item}}
                </li>
            </ul>
            <ul v-for="(row, i) in keys">
                <li v-for="(col, j) in row" :class="col == key ? 'act':''">
                    {{col}}
                </li>
            </ul>
        </div>
        <script src="js/words.js"></script>
        <script>
            Vue.createApp({
                data() {
                    return {
                        ques:['A','B','C','D'],
                        keys:[
                        ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
                        ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
                        ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
                        ],
                        key:'',   //当前按中的字母
                        count:0  //答对数量
                    }
                },
                mounted() { 
                    document.addEventListener('keydown',this.press)
                },
                methods:{
                    press(event){
                            this.key=event.key 
                            if(this.key==this.ques[this.count]){
                                this.count++
                                if(this.count==this.ques.length){
                                    this.count=0
                                    let i=Math.floor(Math.random()*words.length)
                                    this.ques=words[i].split('')
                                }
                            }
                        }
                    }
            }).mount('#app')
        </script>
    </body>
</html>